<template>
	<view>
		<view class="title">手机号登录</view>
		<view class="title-text">输入手机号和验证码登录</view>
		<view class="listbox">
			<view class="listphone">
				<input class="searchbar-input" type="number" @input='blurPhone' placeholder-style="color:#8C92A1;
						font-size:29rpx;" placeholder="请输入手机号" />
			</view>
			<view style="width: 100%;height: 25rpx;"></view>
			<view class="listphone">
				<input class="searchbar-input" type="number" @input="validate" placeholder-style="color:#8C92A1;
						font-size:29rpx;" placeholder="请输入验证码" />
				<view class="codeat">
					<text v-if="codeTime>0" style="color:#2461FF;" @tap="getLoginCaptcha">{{codeTime}}</text>
					<text v-else style="color:#2461FF;" @tap="getLoginCaptcha">获取验证码</text>
				</view>
			</view>
		</view>

		<view class="agreebox">
			<view class="agree-check" @click="btnshows">
				<view v-if="htshow==false" class="agree-border"></view>
				<image v-else class="agree-image" src="../../static/01022120009dzq8tk4239.png"></image>
			</view>
			<view @click="btnshows" style="color: #575757;margin-left: 10rpx;">登录即同意</view>
			<view style="color: #2260FF;">《用户协议》</view>
			<view style="color: #575757;">和</view>
			<view style="color: #2260FF;">《用户隐私政策》</view>
		</view>

		<view v-if="inputvalue==false" class="buttom">登录</view>
		<view v-else class="buttoma" @tap="signin">登录</view>

	</view>
</template>

<script>
	let app = getApp();
	import {
		request
	} from "@/static/common.js";
	export default {
		data() {
			return {
				inputvalue: false,
				htshow: false, //勾选阅读同意
				phone: '', //手机号
				codes: '', //邀请码
				codeTime: 0, //倒计时
			}
		},
		
		onLoad(e) {

		},

		methods: {
			btnshows(e) {
				this.htshow = !this.htshow
			},

			//输入手机号参数
			blurPhone(e) {
				this.phone = e.detail.value
				if (this.phone.length > 0) {
					if (this.codes.length > 0) {
						this.inputvalue = true
					}
				} else {
					this.inputvalue = false
				}
			},

			//输入验证码参数
			validate(e) {
				this.codes = e.detail.value
				if (this.codes.length > 0) {
					if (this.phone.length > 0) {
						this.inputvalue = true
					}
				} else {
					this.inputvalue = false
				}
			},

			// 登录
			async signin(e) {
				if (this.phone == '') {
					uni.showToast({
						title: '请输入手机号码',
						icon: "none",
					})
					return
				}

				if (this.codes == "") {
					uni.showToast({
						title: '请输入验证码',
						icon: "none",
					})
					return
				}

				if (this.htshow == false) {
					uni.showToast({
						title: '请勾选我已阅读并同意',
						icon: "none",
					})
					return
				}

				uni.showLoading({
					title: '登录中...',
				})

				let apply = await request(`${getApp().globalData.http}user/phone_login`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "POST", {
					phone: this.phone,
					code: this.codes
				})
				uni.hideLoading()
				if (apply.data.code == 0) {
					uni.showToast({
						title: `${apply.data.message}`,
						icon: "none",
					})
					//保存token
					app.globalData.token = apply.data.token //保存token
					uni.setStorageSync('token', app.globalData.token)
					uni.reLaunch({
						url: '/pages/home/home'
					})
				} else {
					uni.showToast({
						title: `${apply.data.message}`,
						icon: "none",
					})
				}

			},

			//获取验证码
			async getLoginCaptcha() {
				if (this.phone == '') {
					uni.showToast({
						title: '请输入手机号码',
						icon: "none",
					})
					return
				}

				let apply = await request(`${getApp().globalData.http}send_code`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					phone: this.phone
				})

				if (apply.data.code == 0) {
					uni.showToast({
						title: '发送' + apply.data.message,
						icon: "none",
					})
					// 防止重复获取
					if (this.codeTime > 0) {
						return
					}
					// 倒计时
					this.codeTime = 60
					// 箭头函数可以直接拿到外面的this的内容
					let timer = setInterval(() => {
						if (this.codeTime >= 1) {
							this.codeTime--
							this.codeTime = this.codeTime
						} else {
							clearInterval(timer)
						}
					}, 1000)

				} else {
					uni.showToast({
						title: `${apply.data.message}`,
						icon: "none",
					})
				}

			},

		}
	}
</script>

<style lang="scss" scoped>
	page {
		padding: 0 50rpx;
	}

	.title {
		font-size: 50rpx;
		font-weight: bold;
		padding-top: 100rpx;
	}

	.title-text {
		font-size: 28rpx;
		color: #737D97;
		margin-top: 15rpx;
	}

	.listbox {
		margin-top: 80rpx;
	}

	.listphone {
		width: 100%;
		height: 90rpx;
		background-color: #F5F7FA;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
	}

	.searchbar-input {
		height: 100%;
		margin-left: 20rpx;
		flex: 1;
		margin-right: 20rpx;
	}

	.codeat {
		width: 210rpx;
		height: 36rpx;
		border-left: 1px solid #8C92A1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 29rpx;
	}

	.agreebox {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 80rpx 0;

	}

	.agree-border {
		width: 26rpx;
		height: 26rpx;
		background: #fff;
		border: 1px solid #6f5ce3;
		border-radius: 50%;
		position: relative;
	}

	.agree-image {
		width: 26rpx;
		height: 26rpx;
	}

	.buttom {
		width: 100%;
		height: 90rpx;
		background-color: #BCD0FF;
		font-size: 30rpx;
		color: #ffffff;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
	}

	.buttoma {
		width: 100%;
		height: 90rpx;
		background-color: #2461FF;
		font-size: 30rpx;
		color: #ffffff;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
	}
</style>